<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/index.css">
	<title>优惠券</title>
	<script type="text/javascript" src="js/flexible.js"></script>
</head>

<body>
	<div class="content flex-column bgf pt80" id="app" style="overflow: hidden;">
		<!-- header -->
		<header class="dheader flex-align flex-between">
			<a href="javascript:history.back(-1);" class="dheader-back iconfont iconleft"></a>
			<div class="dheader-title tc">优惠券</div>
		</header>
		<!-- coupon-box -->
		<div class="coupon-box flex1 flex-column ovn">
			<!-- olist-nav -->
			<div class="olist-nav flex-align flex-between">
				<span class="olist-nav-li" :class="navIndex==index?'on':''" v-for="(item,index) in navList" :key="index"
					@click="navClick(item,index)">{{item.name}}</span>
			</div>
			<!-- coupon-swiper -->
			<div class="coupon-swiper flex1 ovn">
				<div class="swiper-wrapper">
					<div class="swiper-slide coupon-list" v-for="(tabItem,tabIndex) in navList" :key="tabIndex"
						@scroll="handleScroll">
						<!--  -->
						<div class="olist">
							<div class="case" :class="g.status==0?'':'used'" @click="toGameDetails(g)"
								v-for="(g,index) in tabItem.dataList" :key="index">
								<div class="case1 flex-column flex-center-align">
									<!-- 折扣券 -->
									<span class="case1_1"
										v-if="g.money_type==1">{{accMultiply(g.coupon_money,10)}}折</span>
									<!-- 优惠券 -->
									<span class="case1_1" v-else>{{g.coupon_money}}</span>
									<div class="case1_2 fz24 cfff" v-if="g.pay_money==0">无门槛</div>
									<div class="case1_2 fz24 cfff" v-else> 满{{g.pay_money}}可用 </div>
									<div class="case1_2 fz24 cfff" v-if="g.is_otherpay==1"> 仅续充可用 </div>
									<div class="case1_2 fz24 cfff" v-if="g.ctype==1 && g.money_type!=1">游戏内使用 </div>
								</div>
								<div class="case2">
									<div class="case2_1 ellipsis2">{{g.gamename}}</div>
									<div class="case2_2">
										<span>{{g.coupon_name}}</span>
										<span class="btn" v-if="g.gid">游戏内领取</span>
									</div>
									<!-- 已过期 -->
									<div class="case2_3" v-if="g.status==3">截止日期{{g.end_time}}</div>
									<!-- 已使用 -->
									<div class="case2_3" v-else-if="g.status==1">使用日期：{{g.use_time}}</div>
									<!-- 待使用 -->
									<div class="case2_3" v-else>
										<span v-if="tabItem.type==2">有效期：{{g.end_time.slice(0,10)}}</span>
										<span v-else>剩余：{{g.remainingTime}}</span>
									</div>
								</div>
								<div class="case3">
									<span v-if="g.status==3">已过期</span>
									<span v-else-if="g.status==1">已使用</span>
									<span v-else>立即使用</span>
								</div>
							</div>
						</div>
						<!--  -->
						<!-- end -->
						<!--  -->
						<div class="loadmore flex-center-align">
							<span class="loadmore-span" v-if="tabItem.status=='more'">上拉显示更多</span>
							<div class="flex-align" v-if="tabItem.status=='loading'">
								<span class="loader-android"></span>
								<span class="loadmore-span">正在加载...</span>
							</div>
							<span class="loadmore-text" v-if="tabItem.status=='noMore'">全部加载</span>
							<div class="loadmore-noData" v-if="tabItem.status=='noData'">
								<span class="loadmore-notxt">暂无数据</span>
							</div>
						</div>
						<!--  -->
					</div>
				</div>
			</div>
			<!--  -->
		</div>
		<!--  -->
		<!--  -->
	</div>
	<!--  -->
	<script src="js/jquery.min.js"></script>
	<script src="js/swiper.min.js"></script>
	<script src="js/vue.global.js"></script>
	<script src="js/used.js"></script>
	<script>

		const { createApp, ref, reactive, onMounted } = Vue
		createApp({
			setup() {
				onMounted(() => {
					init();
					getList('new')
				})
				//滚动
				function handleScroll(event) {
					const scrollDiv = event.target;
					// 获取滚动条的当前位置
					const scrollTop = scrollDiv.scrollTop;
					// 获取滚动容器的可视高度
					const clientHeight = scrollDiv.clientHeight;
					// 获取滚动内容的总高度
					const scrollHeight = scrollDiv.scrollHeight;
					// 判断是否滚动到底部
					if (scrollTop + clientHeight >= scrollHeight - 40) {
						// 你可以在这里执行加载更多数据的操作
						getList()
					}
				}
				let swiper = ref(null);
				//顶部轮播图
				function init() {
					swiper.value = new Swiper(".coupon-swiper", {
						on: {
							slideChangeTransitionStart: function () {
								navIndex.value = this.activeIndex;
								getList('new')
							},
						},
					});
				}
				//导航+列表
				let navList = reactive([
					{
						name: '福利币代金券',
						type: 1,
						dataList: [],
						page: 1,
						status: 'more'

					},
					{
						name: '游戏优惠券',
						type: 2,
						dataList: [],
						page: 1,
						status: 'more'
					},
					{
						name: '使用或过期',
						type: 3,
						dataList: [],
						page: 1,
						status: 'more'
					}
				]);
				let navIndex = ref(0); //当前选中
				//点击导航
				function navClick(item, index) {
					if (navIndex.value != index) {
						swiper.value.slideTo(index)
					}
				}
				//获取列表
				async function getList(type = '') {
					let item = navList[navIndex.value];
					if (type == 'new') {
						item.status = 'more';
						item.page = 1;
						item.dataList = [];
					}
					//判断状态
					if (item.status != 'more') {
						return false;
					}
					item.status = 'loading';
					let params = {
						page: item.page, // 页码
						type: item.type,
					};
					// let res = await .$u.api.TransactionList(params);
					let list = [
						{
							"id": 46316,
							"coupon_name": "648无门槛满减卷",
							"ctype": 1,
							"is_otherpay": 0,
							"gid": 1513,
							"start_time": "2024-05-29 00:00:00",
							"use_time": "",
							"money_type": 0,
							"end_time": "2038-01-19 11:14:07",
							"agent": "",
							"pay_money": "648",
							"coupon_money": "648",
							"status": 0,
							"time": "2024.05.29-2038.01.19",
							"gamename": "烈火骑士（0.1折爆爽版）",
							"pic1": "http://oss.sssgo.com/data/upload/game/20240529/66573d00419d8.png",
							"cid": 46316,
							"is_get": "1",
							"remainingTime": "4526天20小时"
						},
						{
							"id": 46315,
							"coupon_name": "648满减券",
							"ctype": 1,
							"is_otherpay": 0,
							"gid": 1962,
							"start_time": "2024-08-20 00:00:00",
							"use_time": "",
							"money_type": 0,
							"end_time": "2038-01-19 11:14:07",
							"agent": "",
							"pay_money": "648",
							"coupon_money": "648",
							"status": 0,
							"time": "2024.08.20-2038.01.19",
							"gamename": "文明曙光（0.05折买断特权）",
							"pic1": "http://oss.sssgo.com/data/upload/game/20240820/66c45de133d42.gif",
							"cid": 46315,
							"is_get": "1",
							"remainingTime": "4526天20小时"
						},
						{
							"id": 46314,
							"coupon_name": "648无门槛满减卷",
							"ctype": 1,
							"is_otherpay": 0,
							"gid": 2333,
							"start_time": "2024-10-24 00:00:00",
							"use_time": "",
							"money_type": 0,
							"end_time": "2038-01-19 11:14:07",
							"agent": "",
							"pay_money": "648",
							"coupon_money": "648",
							"status": 0,
							"time": "2024.10.24-2038.01.19",
							"gamename": "放置与召唤（0.1折）【8.16关服】",
							"pic1": "http://oss.sssgo.com/data/upload/game/20241024/671a200f31044.gif",
							"cid": 46314,
							"is_get": "1",
							"remainingTime": "4526天20小时"
						},
						{
							"id": 46313,
							"coupon_name": "648无门槛满减卷",
							"ctype": 1,
							"is_otherpay": 0,
							"gid": 2496,
							"start_time": "2024-11-13 00:00:00",
							"use_time": "",
							"money_type": 0,
							"end_time": "2038-01-19 11:14:07",
							"agent": "",
							"pay_money": "648",
							"coupon_money": "648",
							"status": 0,
							"time": "2024.11.13-2038.01.19",
							"gamename": "白蛇仙劫（0.05折VIP全免）",
							"pic1": "http://oss.sssgo.com/data/upload/game/20241113/67349a7e54b6c.gif",
							"cid": 46313,
							"is_get": "1",
							"remainingTime": "4526天20小时"
						},
						{
							"id": 46311,
							"coupon_name": "648无门槛满减卷",
							"ctype": 1,
							"is_otherpay": 0,
							"gid": 2738,
							"start_time": "2024-12-16 00:00:00",
							"use_time": "",
							"money_type": 0,
							"end_time": "2038-01-19 11:14:07",
							"agent": "",
							"pay_money": "648",
							"coupon_money": "648",
							"status": 0,
							"time": "2024.12.16-2038.01.19",
							"gamename": "天天狙击（0.1折定制版）",
							"pic1": "http://oss.sssgo.com/data/upload/game/20241216/675fe5a2065d4.png",
							"cid": 46311,
							"is_get": "1",
							"remainingTime": "4526天20小时"
						},
						{
							"id": 46308,
							"coupon_name": "648元无门槛满减卷",
							"ctype": 1,
							"is_otherpay": 0,
							"gid": 3048,
							"start_time": "2025-01-20 00:00:00",
							"use_time": "",
							"money_type": 0,
							"end_time": "2038-01-19 11:14:07",
							"agent": "",
							"pay_money": "648",
							"coupon_money": "648",
							"status": 0,
							"time": "2025.01.20-2038.01.19",
							"gamename": "五行降妖师（0.05折诛仙降妖）",
							"pic1": "http://oss.sssgo.com/data/upload/game/20250120/678de15a8c7b4.png",
							"cid": 46308,
							"is_get": "1",
							"remainingTime": "4526天20小时"
						},
						{
							"id": 46303,
							"coupon_name": "648元无门槛满减卷",
							"ctype": 1,
							"is_otherpay": 0,
							"gid": 3230,
							"start_time": "2025-02-25 00:00:00",
							"use_time": "",
							"money_type": 0,
							"end_time": "2038-01-19 11:14:07",
							"agent": "",
							"pay_money": "648",
							"coupon_money": "648",
							"status": 0,
							"time": "2025.02.25-2038.01.19",
							"gamename": "圣光之战（0.05折绝世赵云）",
							"pic1": "http://oss.sssgo.com/data/upload/game/20250225/67bd4eefa2052.gif",
							"cid": 46303,
							"is_get": "1",
							"remainingTime": "4526天20小时"
						},
						{
							"id": 46302,
							"coupon_name": "648元无门槛满减卷",
							"ctype": 1,
							"is_otherpay": 0,
							"gid": 3450,
							"start_time": "2025-03-25 00:00:00",
							"use_time": "",
							"money_type": 0,
							"end_time": "2038-01-19 11:14:07",
							"agent": "",
							"pay_money": "648",
							"coupon_money": "648",
							"status": 0,
							"time": "2025.03.25-2038.01.19",
							"gamename": "五行降妖师（0.05折神魔战场）",
							"pic1": "http://oss.sssgo.com/data/upload/game/20250325/67e290f5ac9f6.png",
							"cid": 46302,
							"is_get": "1",
							"remainingTime": "4526天20小时"
						},
						{
							"id": 46300,
							"coupon_name": "648元无门槛满减卷",
							"ctype": 1,
							"is_otherpay": 0,
							"gid": 3635,
							"start_time": "2025-04-17 00:00:00",
							"use_time": "",
							"money_type": 0,
							"end_time": "2038-01-19 11:14:07",
							"agent": "",
							"pay_money": "648",
							"coupon_money": "648",
							"status": 0,
							"time": "2025.04.17-2038.01.19",
							"gamename": "灵武世界（0.05折每天送充值）【10.20关服】",
							"pic1": "http://oss.sssgo.com/data/upload/game/20250417/6800780bebef0.png",
							"cid": 46300,
							"is_get": "1",
							"remainingTime": "4526天20小时"
						},
						{
							"id": 46296,
							"coupon_name": "648元无门槛满减卷",
							"ctype": 1,
							"is_otherpay": 0,
							"gid": 3742,
							"start_time": "2025-04-28 00:00:00",
							"use_time": "",
							"money_type": 0,
							"end_time": "2038-01-19 11:14:07",
							"agent": "",
							"pay_money": "648",
							"coupon_money": "648",
							"status": 0,
							"time": "2025.04.28-2038.01.19",
							"gamename": "圣光之战（0.05折买断游戏）",
							"pic1": "https://oss.sssgo.com/upload/cdcloud2/20250428/0b176290b83acbb352afe5df7b5126bf.png",
							"cid": 46296,
							"is_get": "1",
							"remainingTime": "4526天20小时"
						}
					];
					item.dataList = [...item.dataList, ...list];
					item.page++;
					item.status = pageState(item.dataList.length, list.length)
				}
				return {
					navList,
					navIndex,
					navClick,
					handleScroll,
				}
			}
		}).mount('#app')
	</script>
</body>

</html>